<%--
  Created by IntelliJ IDEA.
  User: Dell
  Date: 2025/7/2
  Time: 23:04
  To change this template use File | Settings | File Templates.
--%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>预约寄养家庭 - 宠物之家</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css">
    <style>
        .form-container {
            max-width: 600px;
            margin: 0 auto;
            padding: 30px;
            background-color: white;
            border-radius: 12px;
            box-shadow: 0 4px 12px rgba(0,0,0,0.05);
        }
        .form-title {
            margin-bottom: 30px;
            text-align: center;
        }
        .btn-primary {
            background-color: #FFD54F;
            color: #5D4037;
            border: none;
        }
        .btn-primary:hover {
            background-color: #FFC107;
        }
    </style>
</head>
<body>
<!-- 引入导航栏 -->


<div class="container mt-5">
    <div class="form-container">
        <h2 class="form-title"><i class="fas fa-calendar-check"></i> 预约寄养家庭</h2>

        <form id="orderForm" action="${pageContext.request.contextPath}/order/create" method="post">
            <!-- 隐藏字段：寄养家庭ID和服务类型 -->
            <input type="hidden" id="familyId" name="family_id" value="${familyId}">
            <input type="hidden" id="serviceType" name="service_type" value="${serviceType}">

            <div class="mb-3">
                <label for="petId" class="form-label">宠物ID</label>
                <input type="number" class="form-control" id="petId" name="pet_id" required>
            </div>

            <div class="mb-3">
                <label for="startDate" class="form-label">开始日期</label>
                <input type="date" class="form-control" id="startDate" name="start_date" required>
            </div>

            <div class="mb-3">
                <label for="endDate" class="form-label">结束日期</label>
                <input type="date" class="form-control" id="endDate" name="end_date" required>
            </div>

            <div class="mb-3">
                <label for="specialRequirement" class="form-label">特殊要求</label>
                <textarea class="form-control" id="specialRequirement" name="special_requirement" rows="3"></textarea>
            </div>

            <div class="d-grid gap-2">
                <button type="submit" class="btn btn-primary btn-lg">
                    <i class="fas fa-check"></i> 确认预约
                </button>
            </div>
        </form>
    </div>
</div>

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
<script>
    // 表单提交前验证
    document.getElementById('orderForm').addEventListener('submit', function(e) {
        const startDate = new Date(document.getElementById('startDate').value);
        const endDate = new Date(document.getElementById('endDate').value);

        // 验证结束日期是否大于开始日期
        if (endDate <= startDate) {
            e.preventDefault();
            alert('结束日期必须大于开始日期');
        }
    });
</script>
</body>
</html>
